<template>
	<view class="content ">
		<top-bar>
			<template #left>
				<image src="../../static/images/login/back.png" @tap="back" style="width: 44rpx;height: 44rpx;"></image>
			</template>
			<template #center>
				<text></text>
			</template>
			<template #right>
				<view class="">
				</view>
			</template>
		</top-bar>
		<view class="main">
			<view class="logo">
				<image src="../../static/images/index/logo.png" mode=""></image>
			</view>
			<view class="title">
				<view class="text">注册</view>
				<view class="hello">沟通是我的利器！</view>
			</view>
			<view class="register_ipt">
				<view class="name">
					<input type="text" placeholder="取个名字" maxlength="18" v-model="alias" placeholder-style="color:#aaa">

				</view>
				<view class="email">
					<input type="text" placeholder="请输入邮箱" maxlength="64" @input="checkEmail()" v-model="Email"
						placeholder-style="color:#aaa">
					<!-- <view class="tip" v-if="isEmail">√</view> -->
					<view class="name_img" v-show="Email">
						<image src="../../static/images/login/email_E.png" @tap="Email=''" v-if="!this.isEmail" mode="">
						</image>
						<image src="../../static/images/login/email_R.png" v-if="this.isEmail" mode=""></image>
					</view>
				</view>
				<view class="password">
					<input class="password_ipt" :password="showPassword" maxlength="18" placeholder="输入密码" v-model="pwd"
						placeholder-style="color:#aaa">
					<view class="eye" @tap="changeEyeUrl()">
						<image :src="eyeUrl"></image>
					</view>
					<!-- <view class="eye"  v-if="!isShowPwd" @tap="hiddenPwd()"><image src="../../static/images/login/hidden.png"></view> -->
				</view>
				<view class="password validCode">
					<input class="password_ipt validCode-input" type="digit" maxlength="6" placeholder="输入邮箱验证码"
						v-model="validcode" placeholder-style="color:#aaa">
					<view class="obtain-validCode" v-if="!checkEmail(Email)||DelayShow">
						获取验证码</view>
					<view class="obtain-validCode validCodeMask" v-else @tap="obtainValidCode">
						获取验证码</view>
					<view v-show="DelayShow" style="position: absolute;right: -60rpx;">{{validCodeDelay}}s</view>

				</view>
			</view>
			<view class="register_btn register_all" @tap="register()">注册</view>
		</view>
	</view>
</template>

<script>
	import util from '../../commons/js/util.js'
	import TopBar from "../../components/top-bar/top-bar.vue"
	import {
		emailCheckApi,
		validaCodeApi,
		registerApi
	} from "../../api/register/index.js"
	export default {
		data() {
			return {
				alias: '',
				Email: '',
				pwd: '',
				validcode: '',
				showPassword: true,

				isEmail: false, //邮箱是否符合
				isValidCode: false, //验证码 初始是不准确显示提示
				validCodeDelay: 60,
				DelayShow: false, //点击显示再次获取验证倒计时
				isShowPwd: true, //密码是否显示
				eyeUrl: "../../static/images/login/hidden.png",

			}
		},
		components: {
			TopBar
		},
		onLoad() {
			this.duration = false //获取验证码中
		},
		//监听属性啊

		methods: {
			returnLogin() {
				uni.navigateBack()
			},

			changeEyeUrl() {
				this.eyeUrl == "../../static/images/login/hidden.png" ?
					this.eyeUrl = "../../static/images/login/show.png" :
					this.eyeUrl = '../../static/images/login/hidden.png'
				this.showPassword = !this.showPassword
			},
			//鼠标离开 检查验证码是否正确
			checkValidCode() {
				console.log(this.validcode);
				if (this.validcode) {
					//请求 检查验证码 验证码不正确 设为true显示提示
					util.request({
						url: '/email/validaCode',
						method: "POST",
						data: {
							code: this.validcode,
							email: this.Email
						}
					}).then(res => {
						//状态码 200 500 success fail
						console.log(res.data.status);
						if (res.data.status == 200) {
							console.log('通过验证');
							this.isValidCode = true
						} else {
							this.isValidCode = false
						}


					})
				}
			},
			obtainValidCode() {
				this.duration = true
				if (!this.checkEmail(this.Email)) {
					uni.showToast({
						title: "邮箱格式错误",
						icon: "none",
						duration: 1500,
					})
					return;
				}
				//邮箱验证正确 并且获取验证码延时存在
				if (this.isEmail && this.duration) {
					//高亮=>灰色显示样式 和 显示倒计时
					this.DelayShow = true
					this.duration = false
					this.isEmail = false
					let timer = setInterval(() => {
						this.validCodeDelay--
						if (this.validCodeDelay == 0) {
							//灰色=>高亮显示样式 隐藏倒计时
							this.duration = true
							this.DelayShow = false
							this.isEmail = true
							clearInterval(timer)
						}
					}, 1000)
					util.request({
						url: '/email',
						method: 'POST',
						data: {
							email: this.Email
						}
					}).then(res => {
						console.log(res);
					})
					//this.isEmail通过验证才可以 去发送获取验证码

					console.log('obtainValidCode');
					this.validCodeDelay = 60
				}
			},
			checkEmail() {
				return util.checkEmailFormat(this.Email) ? this.isEmail = true : this.isEmail = false
			},

			//失去焦点 和后端进行数据查询 如果存在
			checkEmail_db() {
				//邮箱格式正确才 发请求
				if (this.isEmail) {
					util.request({
						url: '/signup/judge',
						method: 'POST',
						data: {
							data: this.Email,
							type: 'email'
						}
					}).then(res => {
						console.log(res.data.result);
						//result为0则可以注册
						if (res.data.result) {
							uni.showToast({
								title: '该账号已存在',
								icon: 'error',
								position: top,
								duration: 2000
							});
							setTimeout(() => {
								this.isEmail = false
							}, 500)
						}
					})
				}
			},
			back() {
				uni.navigateBack()
			},
			errShow(msg) {
				uni.showToast({
					title: msg,
					icon: 'none',
					position: top,
					duration: 1500
				});
			},
			async register() {
				// 检查用户名 
				if (this.alias) {
					console.log("1用户名存在");
					//验证用户名
				} else {
					this.errShow("用户名不能为空")
					return;
				}
				if (this.checkEmail(this.Email)) {
					console.log("2邮箱验证通过");
					//验证邮箱有效性 
					//如果已经被注册 
					const {
						data
					} = await emailCheckApi(this.Email)
					console.log(data);
					if (data.status != 200) {
						this.errShow("系统繁忙")
						return;
					}
					//如果result存在 后端搜索到的数量
					if (data.result) {
						this.errShow("邮箱已经被注册")
						this.isEmail = false
						return;
					}
					//向下执行
				} else {
					this.errShow("邮箱格式不正确")
					return;
				}
				console.log(this.pwd.length, "密码长度");
				if (this.pwd.length > 20 || this.pwd.length < 6) {
					this.errShow("密码长度6~18")
					return;
				}

				if (this.validcode.length == 6) {
					let {
						data
					} = await validaCodeApi({
						code: this.validcode,
						email: this.Email
					})
					if (data.status != 200) {
						this.errShow("验证码错误！")
						return;
					}
				} else {
					this.errShow("验证码错误！")
					return;
				}
				//如果上面流程都没有抛出错误，那么可以进行注册了
				let {
					data
				} = await registerApi({
					name: this.alias,
					mail: this.Email,
					pwd: this.pwd
				})
				if (data.status == 200) {
					console.log("注册成功");
					let that = this
					uni.showToast({
						title: '注册成功',
						icon: 'success',
						position: top,
						duration: 1500,
					});
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/login/login?email=${that.Email}`
						})
					}, 1000)
				} else if (data.status == 300) {
					this.errShow("邮箱已经被注册")
				}
			}

		}
	}
</script>

<style lang='scss'>
	/* 顶栏部分 */
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		/* margin-top: 100rpx; */
		/* border: 1px solid red; */
	}

	.top-bar {
		width: 90%;
		height: 88rpx;
		/* line-height: 70rpx; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: var(--status-bar-height);

		.top-bar-left {
			width: 100rpx;
			height: 50rpx;

			image {
				height: 48rpx;
				width: 48rpx;
			}
		}

		.top-bar-right {
			/* width: 72rpx; */
			/* border: 1px solid red; */
			height: 50rpx;
			font-size: 18px;
			color: #333333;
			font-weight: 500;
		}
	}

	.main {
		height: 750rpx;
		align-items: center;
		justify-content: center;
		margin-top: 88rpx;
		width: 70%;

		/* border: 1px solid red; */
		.logo {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 240rpx;

			image {
				width: 192rpx;
				height: 90rpx;
				;
			}
		}

		.title {
			margin: 0 30rpx 0 30rpx;

			/* border: 1px solid red; */
			.text {
				/* width: 56px; */
				height: 40px;
				font-family: PingFangSC-Medium;
				font-size: 28px;
				color: #272832;
				letter-spacing: 0;
				font-weight: 500;
			}

			.hello {
				/* width: 204px; */
				height: 28px;
				font-size: 20px;
				color: rgba(39, 40, 50, 0.50);
				letter-spacing: 0;
			}
		}

		.register_ipt {
			margin: 60rpx 30rpx 0 30rpx;
			font-size: 30rpx;

			input {
				width: 100%;
				font-size: 30rpx;
			}

			.name {
				border-bottom: 1px solid #d9dae5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: $uni-font-size-base;
				padding: 20rpx 0 20rpx 0;
				margin: 20rpx 0 20rpx 0;

				.name_exist {
					color: red;
				}
			}

			.email {
				border-bottom: 1px solid #d9dae5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: $uni-font-size-base;
				padding: 20rpx 0 20rpx 0;
				margin: 20rpx 0 20rpx 0;

				.name_img {
					text-align: center;
					/* border: 1px solid red; */
					height: 40rpx;
					width: 60rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.password {
				border-bottom: 1px solid #d9dae5;
				display: flex;
				justify-content: start;
				align-items: center;
				font-size: $uni-font-size-base;
				padding: 20rpx 0 20rpx 0;
				margin: 20rpx 0 20rpx 0;

				.password_ipt {
					border: 0px;
					/* padding: 20rpx; */
					outline: none;
				}

				.eye {

					text-align: center;
					/* border: 1px solid red; */
					height: 40rpx;
					width: 60rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.validCode {
				width: 80%;
				border: none;
				position: relative;
				color: gray;

				.validCode-input {
					/* flex: 2; */
					width: 60%;
					padding: 0rpx 0 20rpx 0;
					border-bottom: 1px solid #d9dae5;
				}

				.obtain-validCode {
					width: 160rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					border-radius: 16rpx;
					margin-left: 20rpx;
					color: gray;
					font-size: 24rpx;
					background-color: #f3f4f6;
					user-select: none;
				}

				.exist-validCode {
					color: red;
					position: absolute;
					bottom: 0px;
				}
			}
		}

		.register_btn {
			margin: 108rpx auto;
			width: 520rpx;
			height: 96rpx;
			background: $uni-bg-color-grey;
			border-radius: 48rpx;
			font-size: 32rpx;
			color: gray;
			text-align: center;
			line-height: 90rpx;
		}

		.register_all {
			color: white;
			border-radius: 10rpx;
			background: #4768f3;
		}

		.validCodeMask {
			background-color: #FFE431 !important;
		}
	}
</style>